<!-- 业务订单 -->
<template>
  <a-card :bordered="false" class="br-10">
    <div class="disFlx" style="justify-content: space-between;">
      <div class="disFlx" style="gap: 10px;align-items: flex-start;">
        <ImgOrVideo :item="{url: detailData.imageUrl}" preview :width="90" :height="90" />
        <div class="disFlx flexCol" style="justify-content: space-between;height: 90px;">
          <span>{{ detailData.productName }}</span>
          <span v-if="detailData.productPrice">{{ formatMoney({ money: detailData.productPrice, isShowFree: false })
          }}</span>
          <span>x{{ detailData.productNum }}{{ detailData.productSkuName }}</span>
        </div>
        <a-tag :color=settlementColor>{{ settlementText }}</a-tag>
      </div>
      <a-button type="link" @click="$router.back(-1)">返回列表</a-button>
    </div>

    <s-table size="default" ref="table" rowKey="id" :columns="columns" :data="queryOrderSettlementDtail"
      :showPagination="false">
    </s-table>
  </a-card>
</template>
  
<script>
import { STable } from '@/components'
import { settleDetail } from '@/api/order/order'
import { formatMoney } from "@/utils/number";
import { SettlementStatusEnum } from "@/enums/orderEnum";
import Dictionary from "@/utils/dict/Dictionary";
import ImgOrVideo from '@/components/ImgOrVideo'
export default {
  components: {
    STable,
    ImgOrVideo
  },
  data() {
    return {
      detailData: {},
      // 表头
      columns: [
        {
          title: '商户',
          dataIndex: 'merchantName',
          width: 100,
        },
        {
          title: '商户号',
          dataIndex: 'saasMerchantNo',
          width: 100,
        },
        {
          title: '预估收益',
          dataIndex: 'distributionAmount',
          width: 100,
        },
        {
          title: '结算金额',
          dataIndex: 'settleAmount',
          width: 100,
        },
        {
          title: '结算类型',
          dataIndex: 'settleTypeName',
          width: 100,
        },
        {
          title: '结算时间',
          dataIndex: 'settleDate',
          width: 214,
        },
      ],
    }
  },
  mounted() {
    this.queryOrderSettlementDtail();
  },
  computed: {
    settlementColor() {
      return {
        [SettlementStatusEnum.NO]: 'blue',
        [SettlementStatusEnum.YES]: 'red',
        [SettlementStatusEnum.Refund]: 'green',
      }[this.detailData.settStatus || SettlementStatusEnum.NO]
    },
    settlementText() {
      const obj = Dictionary.getLocal('settlementStatus').find(item => item.dictValue == this.detailData.settStatus);
      return obj && obj.dictLabel;
    }
  },
  methods: {
    formatMoney,
    async queryOrderSettlementDtail() {
      const { data } = await settleDetail(this.$route.query.id);
      this.detailData = data[0];
      return {
        code: 0, data: this.detailData.settleInfoList = this.detailData.settleInfoList.map((item) => {
          return {
            ...item,
            distributionAmount: formatMoney({ money: isNaN(item.distributionAmount) ? 0 : item.distributionAmount, isShowFree: false }),
            settleAmount: formatMoney({ money: isNaN(item.settleAmount) ? 0 : item.settleAmount, isShowFree: false }),
          };
        })
      }
    },
  },
}
</script>
  